<template>
    <div class="order-details">
        <div class="top">
            <div class="left">{{orderDetails.number}}</div>
            <div class="right">{{orderDetails.status_name}}</div>
        </div>
        <div class="order-list">
            <div class="item" v-for="(item, k) in orderDetails.name" :key="k">
                <div class="left">
                    <img v-lazy="renderImg(item.cover)"/>
                    <span>{{item.name}} {{item.dime_name | filterDimen}}</span>
                    <span class="copies"> x {{item.copies}}</span>
                </div>
                <div class="right">￥{{item.copies * item.price}}</div>
            </div>
        </div>
        <div class="order-table-info">
            <div class="item" >
                <div class="left">
                    <img src="../components/menu/img/octagon@2x.png"/>
                    <span>桌台费</span>
                </div>
                <div class="right">￥{{orderDetails.expense}}</div>
            </div>
            <div class="item" >
                <div class="left">
                    <img src="../components/common/img/tag.png"/>
                    <span>满减优惠</span>
                </div>
                <div class="right">￥{{orderDetails.price_coupon}}</div>
            </div>
        </div>
        <div class="coupons-info">
            <span>总计￥{{orderDetails.price_total}}</span>
            <span class="item">优惠￥{{orderDetails.price_coupon}}</span>
            <span class="item">实付￥{{orderDetails.price}}</span>
        </div>
        <div class="pay-info">
            <div>订单号码：{{orderDetails.order_number}}</div>
            <div class="item">下单时间：{{orderDetails.create_time}}</div>
            <div class="item">支付方式：{{orderDetails.pay_style_name}}</div>
        </div>
    </div>
</template>
<script>
    import axios from '../plugins/axios';
    import _ from 'lodash'
    export default {
        async asyncData ({res, req, error}) {
            let response = {};
            let userInfo = res.locals.userInfo;
            let token = res.locals.token;
            let store_id = req.query.store;
            let order_id = req.query.order;
            try {
                response = await axios.get('/api/h5/customer/order/detail', {
                    params: {
                        order_id: order_id,
                        token
                    }
                });
                response = response.data.data || {};
            } catch (e) {
                error({});
            }
            return {
                store_id,
                orderDetails: response,
                userInfo: userInfo,
                token: token
            }
        },
        head () {
            return {
                title: '订单详情'
            }
        },
        filters: {
            filterDimen(val){
                if (val == '/') {
                    return ''
                } else {
                    return `(${val})`
                }

            }
        },
    }
</script>
<style lang="less" scoped>
    .order-details {
        min-height: 100vh;
        height: 100%;
        padding: 8px 20px;
        .top {
            height: 32px;
            line-height: 32px;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #EDEDED;
            font-size: 12px;
            .left {
                color: #000000;
            }
            .right {
                color: #FF5B29;
            }
        }
        .order-table-info,
        .order-list {
            padding: 10px 0;
            border-bottom: 1px solid #EDEDED;
            .item {
                display: flex;
                justify-content: space-between;
                height: 25px;
                line-height: 25px;
                .left {
                    font-size: 12px;
                    color: #000000;
                    letter-spacing: 0.14px;
                    .copies {
                        margin-left: 5px;
                    }
                }
                img {
                    width: 16px;
                    margin-right: 5px;
                    vertical-align: middle;
                    background: #eee;
                }
                .right {
                    font-size: 12px;
                    color: #FF5B29;
                    letter-spacing: 0.14px;
                }
                &.more {
                    font-size: 12px;
                    color: #FF5B29;
                    letter-spacing: 0.14px;
                    align-items: center;
                    justify-content: center;
                }
            }
            .item + .item {
                margin-top: 10px;
            }
        }
        .order-table-info {
            img {
                background: #fff !important;
            }
        }
        .coupons-info {
            height: 38px;
            line-height: 38px;
            text-align: right;
            border-bottom: 1px solid #EDEDED;
            font-size: 14px;
            color: #000000;
            .item {
                margin-left: 10px;
            }
        }
        .pay-info {
            padding-top: 10px;
            font-size: 12px;
            color: #000000;
            letter-spacing: 0.14px;
            .item {
                margin-top: 10px;
            }
        }
    }
</style>